<template>
  <div class="container container-show">
       <div class="login-box" :class="loginClass">
            <div class="apple-btn login-apple">
                <li class="red-btn"></li>
                <li class="yellow-btn"></li>
                <li class="green-btn"></li>
            </div>
            <div class="title">登录</div>
            <div class="input">
                <input type="text" id="login-user" placeholder="输入手机号" v-model='phone'>
            </div>
            <div class="input">
                <input type="password" id="login-password" placeholder="输入密码" v-model='password'>
            </div>
            <div class="btn login-btn" @click="login">
                <span>登录</span>
            </div>
            <div class="change-box login-change">
                <div class="change-btn toSign" @click="signOrLogin('sign')">
                    <span>去注册</span>
                </div>
            </div>
       </div>

       <div class="sign-box" :class="signClass">
            <div class="apple-btn sign-apple">
                <li class="red-btn"></li>
                <li class="yellow-btn"></li>
                <li class="green-btn"></li>
            </div>
            <div class="title">注册</div>
            <div class="input">
                <input type="text" id="sign-user" placeholder="使用手机号注册?">
            </div>
            <div class="input">
                <input type="password" id="sign-password" placeholder="设置密码">
            </div>
            <div class="btn sign-btn">
                <span>注册</span>
            </div>
            <div class="change-box sign-change">
                <div class="change-btn toLogin" @click="signOrLogin('login')">
                    <span>去登陆</span>
                </div>
            </div>
       </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data: function () {
    return {
      signClass: '',
      loginClass: '',
      phone: '',
      password: ''
    }
  },
  computed: {
    ...mapState('login', ['showNav'])
  },
  methods: {
    signOrLogin (flag) {
      if (flag === 'login') {
        this.signClass = ''
        this.loginClass = ''
      } else if (flag === 'sign') {
        this.signClass = 'animate_sign'
        this.loginClass = 'animate_login'
      }
    },
    login () {
      if (this.phone === '' || this.password === '') {
        if (this.phone === '' && this.password !== '') {
          alert('请填写手机号')
        } else if (this.phone !== '' && this.password === '') {
          alert('请填写密码')
        } else {
          alert('请填写账号和密码')
        }
      } else {
        this.timer = setTimeout(() => {
          this.$router.push('/')
          this.$store.dispatch('login/changeShowNav', true)
        }, 1000)
      }
    }
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  }
}
</script>

<style lang="less" scoped>
.container {
  position: fixed;
  height: 350px;
  width: 600px;
  background-color: rgba(255, 255, 255, .9);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%);
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(17, 39, 59, 0.8);
  border: 1px solid rgba(17, 39, 59, 1);
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  transition: 1s;
  &:hover {
    .title {
      font-size: 20px;
    }
    input {
      transform: translate(0, -30%);
    }
    .btn {
      height: 30px;
      width: 90px;
      transform: translate(0,-30%);
      font-size: 12px;
    }
    .change-box {
      height: 200px;
    }
    .change-btn {
      display: block;
    }
    .red-btn {
      opacity: 1;
      transform: translate(0,0);
    }
    .yellow-btn {
      opacity: 1;
      transform: translate(0,0);
    }
    .green-btn {
      opacity: 1;
      transform: translate(0,0);
    }
  }
}
.container-show {
  transform: translate(-50%,-50%);
  opacity: 1;
}
.title {
  margin-top: 10px;
  position: relative;
  height: 40px;
  width: 100%;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 3px;
  transition: .4s;
}
.login-box {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(17, 39, 59, 0.8);
  transition: .4s;
  z-index: 1;
  transform-origin: 0 100%;
  .title {
    color: white;
    text-shadow: 0px 0px 7px rgba(255, 255, 255, .9);
  }
  input {
    caret-color: white;
    color: rgba(255, 255, 255, 0.8);
    &:focus {
      box-shadow: 0 0 10px rgba(1,1,1, .8);
    }
  }
}
.input {
  width: 400px;
  height: 45px;
  position: relative;
  margin: 40px auto;
}
input {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding-left: 15px;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 45px;
  transition: .4s;
}
.btn {
  height: 50px;
  width: 160px;
  position: relative;
  margin: -10px auto;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  color: rgba(255, 255, 255, .4);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: .4s;
}
.change-box {
  position: absolute;
  height: 0px;
  width: 100%;
  clip-path: polygon(100% 50%, 50% 100%, 100% 100%);
  bottom: 0px;
  transition: .4s;
}
.change-btn {
  position: absolute;
  bottom: 30px;
  right: 40px;
  font-size: 20px;
  display: none;
  font-weight: 500;
  &:hover {
    text-shadow: 0px 0px 3px rgba(200, 200, 200, .8);
    cursor: pointer;
  }
}
.login-btn {
  &:hover {
    color: white;
    background-color: #57606f;
    box-shadow: rgba(0, 0, 0, 0.1);
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
  }
}
.login-change {
  background-color: rgba(255, 255, 255, .8);
}
.animate_login {
  transform: rotate(-90deg);
}
.animate_sign {
  transform: rotate(0deg) !important;
}
/* 注册框样式 */
.sign-box {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, .8);
  transform-origin: 0 100%;
  transform: rotate(90deg);
  transition: .4s;
  z-index: 1;
  .title {
    text-shadow: 0 0 10px rgba(200, 200, 200, .8);
    font-weight: 500;
  }
  input {
    box-shadow: 0 0 3px black;
  }
  .btn {
    color: #1e90ff;
    background-color: rgba(200, 200, 200, .1);
    transition: .5s;
    &:hover {
      color: white;
      background-color: #1e90ff;
    }
  }
}
.sign-change {
  background-color: rgba(17, 39, 59, 0.8);
}
.toLogin {
  color: white;
}
/* Mac 按钮样式及特效 */
.apple-btn {
  position: absolute;
  height: 15px;
  width: 65px;
  top: 3px;
  li {
    list-style: none;
    position: relative;
    height: 15px;
    width: 15px;
    border-radius: 15px;
    opacity: 0;
  }
}
.login-apple {
  li {
    left: 5px;
    float: left;
  }
}
.sign-apple {
  right: 5px;
  li {
    right: 5px;
    float: right;
  }
}
li {
  &:nth-child(2) {
    margin: 0px 2px;
  }
}
.red-btn {
  background-color: red;
  transition: .3s;
  transform: translate(0, -50%);
}
.yellow-btn {
  background-color: orange;
  transition: .6s;
  transform: translate(0, -50%);
}
.green-btn {
  background-color: rgb(15, 136, 15);
  transition: .9s;
  transform: translate(0, -50%);
}

</style>
